<template>
  {{this.searchForm}}
  <el-form :inline="true" :model="searchForm" class="demo-form-inline">
    <el-form-item label="名称">
      <el-input v-model="searchForm.name" placeholder="名称" />
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="query">查询</el-button>
    </el-form-item>
  </el-form>

  <div style="margin-bottom: 10px;">
    <el-button size="small"  type="primary" @click="dialogFormVisible=true">添加</el-button>
  </div>


  <el-table :data="productList" style="width: 100%">
    <el-table-column prop="photo" label="图片" width="200">
      <template #default="scope">
        <img style="width:50px" :src="'http://121.199.173.91/assets/images/'+scope.row.photo"/>
      </template>
    </el-table-column>
    <el-table-column prop="name" label="商品名" width="200" />
    <el-table-column prop="price" label="价格" width="200" />
    <el-table-column prop="description" label="描述" />


    <el-table-column label="操作">
      <template #default="scope">
        <el-button size="small">编辑</el-button>
        <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
      </template>
    </el-table-column>

  </el-table>


  <!--用户对话框-->
  <el-dialog v-model="dialogFormVisible" title="添加商品">

    <el-form :model="productForm">
      <el-form-item label="名称" label-width="120px">
        <el-input v-model="productForm.name" autocomplete="on" />
      </el-form-item>

      <el-form-item label="价格" label-width="120px">
        <el-input v-model="productForm.price" autocomplete="off" />
      </el-form-item>

      <el-form-item label="描述" label-width="120px">
        <el-input v-model="productForm.description" maxlength="30" show-word-limit type="textarea"/>
      </el-form-item>

    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">关&nbsp;&nbsp;闭</el-button>
        <el-button type="primary" @click="addProduct">提&nbsp;&nbsp;交</el-button>
      </span>
    </template>
  </el-dialog>

  <!--确认框-->
<!--  <el-dialog v-model="dialogVisible" title="提示" width="30%">-->
<!--    <span style="font-size: 20px">是否要删除该商品</span>-->
<!--    <template #footer>-->
<!--      <span class="dialog-footer">-->
<!--        <el-button @click="dialogVisible = false">取消</el-button>-->
<!--        <el-button type="primary" @click="deleteProduct">确认</el-button>-->
<!--      </span>-->
<!--    </template>-->
<!--  </el-dialog>-->



</template>

<script>
import request from "@/request/request";
import qs from "qs";
export default {
  name: "ProductListView",

  data(){
    return {
      dialogFormVisible: false,
      // dialogVisible: false,
      productList: [],
      searchForm: {
          name: "",
          shopId: "1",
      },
      productForm:{
        name:"",
        price:"",
        photo: "dcfl01.png",
        description: "",
        shopId: "1"
      },
    }
  },
  methods:{
    //加载商品列表
    loadProductList(){
      request({
        method:"get",
        url:"product-service/product?"+qs.stringify(this.searchForm),
      }).then((respData)=>{
        this.productList = respData.data;
      })
    },

    //查询
    query(){
      this.loadProductList();
    },

    /**
     * 添加商品
     */
    addProduct(){
      request({
        method: "put",
        url: "product-service/product?"+qs.stringify(this.productForm),
      }).then((respData)=>{
        console.log(respData.data)
        this.loadProductList();
      });

      this.dialogFormVisible = false;
    },


    /**
     * 删除商品
     */
    handleDelete(row){

      this.$messageBox.confirm(
          '是否删除'+row.name+'商品?',
          '删除',{
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }
      ).then(() => {
        //发送请求
        request({
          method:"delete",
          url:"product?"+row.id
        }).then((respData)=>{
          if(respData.code ==200){
            this.$message({
              message: respData.msg,
              type: 'success'
            });
            //重新加载角色列表
            this.loadProductList();
          }else{
            console.log("失败");
          }
        })

        //刷新数据
      })
    },

  },



  created() {
    this.loadProductList();
  }
}
</script>

<style scoped>

</style>